<template>
  <div>
    <Title title="意见列表"> </Title>
    <SearchForm @todochange="changesome"></SearchForm>
    <el-row>
      <el-col :span="22" :offset="1">
        <el-table :data="adviseList" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column prop="title" label="意见标题" align="center">
            <template #default="scope">
              <!-- scope.$index：当前数据在所有数据中的索引下标 -->
              <!-- scope.row：当前这一条数据。包含了时间戳，包含了用户信息 -->
              <span> {{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="发布时间" align="center">
            <template #default="scope">
              <span> {{ $filters.timeFormat(scope.row.time) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="author" label="发布人" align="center">
            <template #default="scope">
              <span> {{ scope.row.author.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <!-- 当登录的是本人才能修改组件的数据 -->
              <span class="btnBox" v-if="scope.row.author.phone == myPhone">
                <el-popconfirm
                  confirm-button-text="删除"
                  cancel-button-text="取消"
                  :icon="InfoFilled"
                  icon-color="#626AEF"
                  @confirm="confirmDelOne(scope.row, scope.$index)"
                  title="你确定要删除吗?"
                >
                  <template #reference>
                    <el-button type="danger" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button
                  size="small"
                  @click="updateOne(scope.row, scope.$index)"
                  >修改</el-button
                >
              </span>
              <el-button @click="showDia(scope.row)" size="small" type="success"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 每次点击展示，就把当前条的数据赋给model，展示的数据依赖model -->
    <el-dialog v-model="visible" :show-close="false">
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">
            <span>标题</span> {{ model.title }}
          </h4>
          <el-button type="danger" @click="visible = false">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          </el-button>
        </div>
      </template>
      <div>
        <el-row :gutter="20">
          <el-col :span="12">发布人</el-col>
          <el-col :span="12">{{ model.author.username }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">发布时间</el-col>
          <el-col :span="12">{{ $filters.timeFormat(model.time) }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">分类</el-col>
          <el-col :span="12">{{ model.cate }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">意见内容</el-col>
          <el-col :span="12">{{ model.context }}</el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 修改的dialog -->

    <DialogForm
      :form="model"
      :rules="rules"
      ref="dialogRef"
      :comfirmChange="comfirmChange"
    >
      <el-form-item label="意见标题" prop="title">
        <el-input
          clearable
          v-model="model.title"
          placeholder="意见标题"
          type="text"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="意见分类" prop="cate">
        <el-select
          v-model="model.cate"
          class="m-2"
          style="width: 100%"
          placeholder="意见分类"
          size="default"
        >
          <el-option
            v-for="item in AdviseTypes"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="意见内容" prop="context">
        <el-input
          rows="10"
          clearable
          v-model="model.context"
          placeholder="意见内容"
          type="textarea"
          autocomplete="off"
        />
      </el-form-item>
    </DialogForm>
  </div>
</template>

<script setup lang="ts">
import { InfoFilled } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import { Ajax } from "@/api";
import { ElButton, ElDialog } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { AdviseTypes, ShowErrorMsg } from "@/utils";
import SearchForm from "@/components/SearchForm.vue";
import DialogForm from "@/components/DialogForm.vue";
const adviseList = ref([]);
const model = ref<any>({}); //单个条数据
const dialogRef = ref<any>();
const getAdviseList = async (payload?: any) => {
  let res: any = await Ajax.adviselist(payload);
  adviseList.value = res.result;
};
const myPhone = localStorage.getItem("yq_phone");
const visible = ref<any>(false);
const dialogVisible = ref<any>(false);
const formRef = ref<any>();
const changesome = (v: any) => {
  getAdviseList(v);
};
const confirmDelOne = async (data: any, index: any) => {
  console.log(data, index);

  let res: any = await Ajax.advisedelete({ _id: data._id }); //后端删除
  getAdviseList(); //重新获取数据，刷新页面
};

const updateOne = (data: any, index: any) => {
  //打开修改框
  dialogRef.value.dialogVisible = true;
  model.value = Object.assign({}, data); //给修改框的数据赋值
};

const comfirmChange = async () => {
  //确认修改留言
  let res: any = await Ajax.adviseupdate(model.value);
  if (res.code == 200) {
    dialogRef.value.handleClose(); //修改完毕关掉修改框，提示修改成功，刷新视图
    getAdviseList(); //用这种傻子办法刷新视图
  }
};

const resetForm = () => {
  model.value = {};
  formRef.value.resetFields;
};

const rules = reactive({
  //修改的dialog框的正则
  title: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  context: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  cate: [
    //这个校验平时不会触发，提交表单会触发
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const showDia = (e: any) => {
  visible.value = true;
  model.value = Object.assign({}, e);
};

onMounted(() => {
  getAdviseList();
});
</script>

<style scoped lang="scss">
.btnBox {
  margin-right: 10px;
}
.my-header {
  text-align: center;
  // display: flex;
  // flex-direction: row;
  // justify-content: center;
  h4 {
    display: inline-block;
    span {
      margin-right: 30px;
    }
  }

  .el-button {
    float: right;
  }
}
.el-row {
  margin-bottom: 30px;
}
</style>
